<template>
  <div class="searchTool">
    <div class="search-top">
      <router-link
        tag="div"
        to="/home"
        class="left iconfont icon-arrow-left-bold"
      >
      </router-link>
      <!-- 搜索框 -->
      <div class="searchAll">
        <span class="iconfont icon-search"></span>
        <!-- <input type="text" v-model="SoMusic"  @keyup.enter="confirm"> -->
        <!-- <van-cell-group> -->
        <van-field class="const" v-model="SoMusic" @keyup.enter="confirm" />
        <!-- </van-cell-group> -->
      </div>
      <div class="right" @click="confirm">搜索</div>
    </div>
    <div class="listt">
      <!-- <router-link tag="div" to="singerFun">
        <span class="iconfont icon-geshou"></span> 歌手
      </router-link> -->
      <div><span class="iconfont icon-geshou"></span> 歌手</div>

      <div><span class="iconfont icon-yintiao"></span> 曲风</div>
      <div><span class="iconfont icon-zhuanji"></span> 专区</div>
      <div><span class="iconfont icon-tinggeshiqu"></span> 识曲</div>
    </div>
    <!-- 推荐 -->
    <div class="nominate">
      <div class="nominate-top">
        <div class="nominate-left">推荐</div>
        <span class="iconfont icon-shuaxin"></span>
      </div>
      <ul>
        <li><span> Beyond</span></li>
        <li><span> 琵琶行</span></li>
        <li><span> 遗失的心跳</span></li>
        <li><span> 星星点灯</span></li>
        <li><span> 张杰</span></li>
      </ul>
    </div>
    <!-- 热歌榜 -->
    <div class="hot">
      <div class="hotsong">
        <div class="swiper-container swiper-container-hot">
          <div class="swiper-wrapper">
            <!-- 要给item设置宽度 -->
            <div class="swiper-slide item">
              <ul>
                <div class="reb">
                  <h3>热歌榜</h3>
                  <div class="more">
                    <span class="iconfont icon-bofang"></span>播放
                  </div>
                </div>
                <li v-for="(item, index) in searchTool" :key="index">
                  <span :class="[{ con: index < 3 }]">{{ index + 1 }}</span>
                  <p>{{ item.searchWord }}</p>
                </li>
              </ul>
            </div>
            <div class="swiper-slide item">
              <ul>
                <div class="reb">
                  <h3>话题榜</h3>
                </div>
                <li v-for="(item, index) in searchTool" :key="index">
                  <span :class="[{ con: index < 3 }]">{{ index + 1 }}</span>
                  <p>{{ item.searchWord }}</p>
                </li>
              </ul>
            </div>
            <div class="swiper-slide item">
              <ul>
                <div class="reb">
                  <h3>视频榜</h3>
                </div>
                <li v-for="(item, index) in searchTool" :key="index">
                  <span :class="[{ con: index < 3 }]">{{ index + 1 }}</span>
                  <p>{{ item.searchWord }}</p>
                </li>
              </ul>
            </div>
            <div class="swiper-slide item">
              <ul>
                <div class="reb">
                  <h3>有声书榜</h3>
                </div>
                <li v-for="(item, index) in searchTool" :key="index">
                  <span :class="[{ con: index < 3 }]">{{ index + 1 }}</span>
                  <p>{{ item.searchWord }}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 显示窗口 -->
    <div class="musiclist" v-if="SoMusic">
      <ul>
        <li v-for="item in musiclists" :key="item.id" @click="prass(item.id)">
          <span class="iconfont icon-search"></span>
          <div class="lyrics">
            {{ item.name }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
//引入接口
import "../assets/font/iconfont.js";
import Swiper from "swiper";
import { getsearch, getSearchToll } from "../api/search";
export default {
  data() {
    return {
      searchTool: [],
      SoMusic: "",
      musiclists: null,
    };
  },
  methods: {
    getsearchFun() {
      getsearch().then((data) => {
        // console.log(data,"热搜列表");
        this.searchTool = data.data;
      });
    },
    //搜索框
    getSearchTollFun() {
      // console.log(this)
      let keywords = this.SoMusic;
      getSearchToll({ keywords }).then((data) => {
        // console.log(data,"搜索")
        this.musiclists = data.result.songs;
        // console.log(this.musiclists)
      });
    },
    //搜索按钮
    confirm() {
      //   console.log("搜索");
      this.$emit("get-search-toll", this.SoMusic);
      this.getSearchTollFun();
    },
    prass(id) {
      this.$emit("get-player-id", id);
      //   console.log("点击播放");
    },
  },
  created() {
    this.getsearchFun();
    // this.getSearchTollFun();
  },
  mounted() {
    new Swiper(".swiper-container-hot", {
      slidesPerView: "auto",
      paginationClickable: true,
      spaceBetween: -5, //距离px
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, //修改swiper的父元素时，自动初始化swipe
    });
  },
};
</script>

<style lang="less" >
.searchTool {
  background-color: #f7f7f7;
  position: absolute;
  width: 100%;
  .search-top {
    display: flex;
    height: 50px;
    width: 100%;
    background-color: #ffffff;
    position: fixed;
    z-index: 190;
    .left,
    .right {
      flex: 0 0 50px;
      text-align: center;
      line-height: 46px;
      color: #131414;
      // font-size: 19px;
      // font-weight: bold;
    }
    .right {
      font-weight: normal;
      font-size: 16px;
    }
    .searchAll {
      flex: 1;
      text-align: center;
      height: 26px;
      line-height: 26px;
      margin-top: 10px;
      border-radius: 13px;
      background: #fff;
      color: #8a8a8a;
      font-size: 13px;
      background-color: #f8f8f8;
      display: flex;
      span {
        flex: 0 0 30px;
      }
      .const {
        margin: 0px;
        padding: 0px;
        width: 80%;
        background-color: #f8f8f8;
      }
      input {
        flex: 1;
        border: none;
        color: transparen;
      }
    }
  }
  .listt {
    display: flex;
    background-color: #ffffff;
    height: 50px;
    margin-top: 50px;
    div {
      height: 46px;
      line-height: 46px;
      text-align: center;
      flex: 1;
      position: relative;
      font-size: 14px;
      font-weight: 600;
      &::after {
        content: "";
        display: block;
        width: 1px;
        height: 16px;
        background-color: #e8e8e9;
        position: absolute;
        top: 13px;
        right: 0px;
      }
      &:last-of-type::after {
        width: 0px;
      }
      .iconfont {
        font-size: 14px;
        color: red;
      }
    }
  }
  // 推荐
  .nominate {
    .nominate-top {
      margin: 3px 0 9px 0;
      display: flex;
      height: 30px;
      // line-height: 30px;
      justify-content: space-between;
      .nominate-left {
        margin: 10px 0 0 15px;
        font-size: 14px;
        font-weight: 600;
      }
      .iconfont {
        margin: 10px 10px 0 0;
        font-size: 25px;
      }
    }
    ul {
      display: flex;
      margin-left: 15px;
      li {
        height: 27px;
        border-radius: 15px;
        background-color: #ffffff;
        margin: 0 5px 0 0;
        span {
          height: 27px;
          line-height: 27px;
          text-align: center;
          margin: 0 11px;
          font-size: 12px;
          color: #848484;
        }
      }
    }
  }
  // 热歌榜
  .hot {
    margin-top: 19px;
    .hotsong {
      overflow-y: scroll;
      .item {
        display: flex;
        width: 52%;
        // height: 300px;
        margin-left: 15px;
        background-color: #ffffff;
        flex-direction: column;
        border-radius: 7px;
        .reb {
          display: flex;
          justify-content: space-between;
          text-align: center;

          h3 {
            font-weight: 600;
            height: 50px;
            margin-left: 15px;
            line-height: 50px;
          }
          .more {
            height: 20px;
            line-height: 20px;
            width: 42px;
            border: 1px solid #f7f7f7;
            border-radius: 10px;
            font-size: 10px;
            text-align: center;
            margin-right: 12px;
            margin-top: 15px;
            .iconfont {
              font-size: 10px;
            }
          }
        }
        li {
          display: flex;
          height: 33px;
          span {
            width: 33px;
            height: 33px;
            line-height: 33px;
            text-align: center;
          }
          .con {
            color: red;
          }
          p {
            height: 33px;
            line-height: 33px;
            font-size: 16px;
            text-align: center;
          }
        }
      }
    }
  }
  //搜索界面
  .musiclist {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 190;
    top: 50px;
    left: 0px;
    ul {
      height: 54%;
      overflow: hidden;
      li {
        margin-left: 12px;
        height: 38px;
        line-height: 38px;
        display: flex;
        span {
          display: inline-block;
          margin-right: 7px;
        }
        .lyrics {
          font-size: 14px;
          flex: 1;
          border-bottom: 2px solid #fafafa;
        }
      }
    }
  }
}
</style>